<li
  #timelineItem
  class="lv-timeline-item"
  [class.lv-timeline-item-left]="lvPosition === 'left'"
  [class.lv-timeline-item-right]="lvPosition === 'right'"
  [class.lv-timeline-item-tiled]="lvPosition === 'tiled'"
>
  <ng-container *ngIf="timelineMode !== 'tiled'">
    <ng-container *ngTemplateOutlet="axisTemplate"></ng-container>

    <div class="lv-timeline-item-container">
      <div class="lv-timeline-item-content">
        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
      </div>
      <time class="lv-timeline-item-time">
        <ng-container *ngIf="typeUtils.isTemplateRef(time); else defaultTimeRender">
          <ng-container *ngTemplateOutlet="time; context: { $implicit: time }"></ng-container>
        </ng-container>
        <ng-template #defaultTimeRender>
          <ng-container>{{ time }}</ng-container>
        </ng-template>
      </time>
    </div>
  </ng-container>

  <!-- 平铺布局 -->
  <ng-container *ngIf="timelineMode === 'tiled'">
    <time class="lv-timeline-item-time">{{ time }}</time>

    <ng-container *ngTemplateOutlet="axisTemplate"></ng-container>

    <div class="lv-timeline-item-content">
      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </div>
  </ng-container>
</li>

<!-- 轴线模板 -->
<ng-template #axisTemplate>
  <div class="lv-timeline-item-axis">
    <div class="lv-timeline-item-tail"></div>

    <div class="lv-timeline-item-dot-content">
      <span *ngIf="!lvDot" class="lv-timeline-item-dot" [ngClass]="[lvType ? 'lv-timeline-item-dot-' + lvType : '']"></span>

      <ng-container *ngIf="lvDot">
        <ng-container *ngIf="typeUtils.isRealString(lvDot)">
          <div class="lv-timeline-item-dot lv-timeline-item-dot-custom">{{ lvDot }}</div>
        </ng-container>

        <ng-container *ngIf="typeUtils.isTemplateRef(lvDot)">
          <div class="lv-timeline-item-dot lv-timeline-item-dot-custom">
            <ng-container *ngTemplateOutlet="lvDot"></ng-container>
          </div>
        </ng-container>
      </ng-container>
    </div>
  </div>
</ng-template>

<!-- 投影模板 -->
<ng-template #contentTemplate>
  <ng-content></ng-content>
</ng-template>
